<template>
    <div class="search_info">
        <div class="info_chang_search">
            <div class="tabs">当前位置：<span @click="$router.push({name: 'home'})">首页</span>>搜索结果</div>
            <search-box></search-box>
        </div>
        <template v-if="total > 0">
            <div class="tips">为您搜索到以下结果</div>
            <div class="info_box_list">
                <div class="box_hout_info" @click="goDetails(item.id)" v-for="(item,index) in searchList" :key="index">
                    <div class="box_img">
                        <img :src="item.cover" class="img_box">
                    </div>
                    <div class="title_json">
                        <div class="titles" v-html="searchKeys(item.name)"></div>
                        <div class="jsons" v-html="searchKeys(item.info)"></div>
                    </div>
                </div>
            </div>
            <div class="block">
                <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="limit"
                    layout="total, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </template>
        <el-empty v-else description="未打到相关产品"></el-empty>
        <template v-if="articleTotal > 0">
            <el-divider>文章</el-divider>
            <div class="article-list">
                <div @click="articleToPage(item)" class="article-item" v-for="item in articleList" v-html="searchArticleKeys(item)"></div>
            </div>
            <div class="block">
                <el-pagination
                    background
                    @current-change="changeArticlePage"
                    :current-page="articlePage"
                    :page-size="articleLimit"
                    layout="total, prev, pager, next, jumper"
                    :total="articleTotal">
                </el-pagination>
            </div>
        </template>
    </div>
</template>

<script>
    import SearchBox from "@/components/searchBox";
    import {searchArticle, searchGoods} from "@/api/apis";

    export default {
        name: "searchInfo",
        components: {SearchBox},
        data() {
            return {
                currentPage: 1,
                limit: 20,
                total: 0,
                searchList: [],
                articlePage: 1,
                articleLimit: 20,
                articleList: [],
                articleTotal: 0,
                searchTxt: ''
            }
        },
        mounted() {
            if (this.$route.query.name) {
                this.searchTxt = this.$route.query.name
            }
            this.SearchLsit()
        },
        watch: {
            $route(to, from) {
                if (to.query.name != from.query.name) {
                    this.searchTxt = to.query.name
                    this.SearchLsit()
                }
            }
        },
        methods: {
            goDetails(e) {
                this.$router.push({
                    name: 'productDetails', query: {
                        goods_id: e,
                        keyword: this.searchTxt
                    }
                })
            },
            SearchLsit() {
                let data = {name: this.searchTxt, type: 2, page: this.currentPage, limit: this.limit}
                searchGoods(data).then(res => {
                    this.searchList = res.data.data;
                    this.total = res.data.total;
                    this.articleList = [];
                    this.articlePage = 1;
                    this.articleTotal = 0;
                    this.searchArticle();
                })
            },
            changeArticlePage(page) {
                this.articlePage = page;
                this.searchArticle();
            },
            searchArticle() {
                let data = {name: this.searchTxt, type: 2, page: this.articlePage, limit: 20}
                searchArticle(data).then((result) => {
                    if (result.data.total) {
                        this.articleList = result.data.data;
                        this.articleTotal = result.data.total;
                    }
                });
            },
            handleCurrentChange(e) {
                this.currentPage = e
                this.SearchLsit()
            },
            searchKeys(str) {
                if (this.$route.query.name) {
                    let keyRegExp = new RegExp(`(${this.$route.query.name})`, 'ig');
                    return str.replace(keyRegExp, `<span class="red">$1</span>`)
                } else {
                    return str;
                }
            },
            searchArticleKeys(item) {
                let title = "";
                switch (parseInt(item.type)) {
                    case 1: //技术中心
                        title = '技术中心';
                        break;
                    case 2: //服务中心
                        title = '服务中心';
                        break;
                    case 3: //购物指南
                        title = '购物指南';
                        break;
                    case 4: //特色服务
                        title = '特色服务';
                        break;
                }
                let names = item.title;
                if (this.$route.query.name) {
                    let keyRegExp = new RegExp(`(${this.$route.query.name})`, 'ig');
                    names = names.replace(keyRegExp, `<span class="red">$1</span>`)
                }
                if (title != "") {
                    names = `<span class="title">【${title}】</span> ${names}`;
                }
                return names;
            },
            articleToPage(item) {
                let toPath = "";
                switch (parseInt(item.type)) {
                    case 1: //技术中心
                        toPath = 'tcenter';
                        break;
                    case 2: //服务中心
                        toPath = 'scenter';
                        break;
                    case 3: //购物指南
                        toPath = 'directory';
                        break;
                    case 4: //特色服务
                        toPath = 'characteristic';
                        break;
                }
                if (toPath != "") {
                    this.$router.push({
                        name: toPath,
                        query: {
                            id: item.id
                        }
                    });
                }
            }
        }
    }
</script>

<style scoped lang="less">
    .search_info {
        padding-top: 11px;
        width: 1200px;
        margin: 0 auto;
        cursor: pointer;
        padding-bottom: 40px;
        
        .article-list {
            display: flex;
            flex-wrap: wrap;
            
            .article-item {
                margin: 0 10px 10px;
            }
        }
        
        .info_chang_search {
            display: flex;
            cursor: pointer;
            align-items: center;
            justify-content: space-between;
            
            .tabs {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #000000;
            }
            
        }
        
        .tips {
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            margin: 40px auto;
            text-align: center;
            color: #B11E24;
        }
        
        .info_box_list {
            display: flex;
            flex-wrap: wrap;
            
            .box_hout_info {
                width: 217px;
                margin-right: 27px;
                margin-bottom: 27px;
                
                .box_img {
                    height: 150px;
                    background: rgba(0, 0, 0, 0);
                    border: 1px solid #E9E9E9;
                    box-sizing: border-box;
                    
                    .img_box {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
                
                .title_json {
                    margin: 10px auto 0;
                    
                    
                    .titles {
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #000000;
                        margin-bottom: 8px;
                    }
                    
                    .jsons {
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        line-height: 20px;
                        color: #000000;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 3;
                        -webkit-box-orient: vertical;
                        
                        .red {
                            color: #B11E24;
                        }
                    }
                }
            }
            
            .box_hout_info:nth-child(5n) {
                margin-right: 0;
            }
            
            .box_hout_info:hover {
                .box_img {
                    border-color: #B11E24;
                }
                
                .title_json {
                    .titles {
                        color: #B11E24;
                        
                        .red {
                            color: #B11E24;
                        }
                    }
                }
            }
        }
    }
</style>
<style lang="less">
    .search_info {
        .article-list {
            .article-item {
                .red {
                    color: #B11E24;
                }
            }
        }
        
        .info_box_list {
            .box_hout_info {
                .title_json {
                    .titles {
                        .red {
                            color: #B11E24;
                        }
                    }
                    
                    .jsons {
                        .red {
                            color: #B11E24;
                        }
                    }
                }
            }
        }
    }
</style>
